import React, {Component} from 'react';
import {StyleSheet, View, Text, TextInput, TouchableOpacity} from 'react-native';


export default class Item extends Component {
    constructor(props) {
        super(props);
        this._onChangeText = this._onChangeText.bind(this);
        this._showData = this._showData.bind(this);
    }

    componentWillMount() {
        this.state = {
            currValue: this.props.value,
            lineNum: this.props.lineNum || 1
        }
    }

    componentWillReceiveProps(nextProps) {
        this.state = {
            currValue: nextProps.value,
            lineNum: nextProps.lineNum || 1
        }
    }

    _onChangeText(inputData) {
        this.setState({currValue: inputData});
    }

    _showData() {
        this.props.changeValue(this.state.currValue);
    }


    render() {
        // console.log("title:" + this.props.title + "   value:" + this.props.value + "  state:" + this.state.currValue);
        return (
            <View style={styles.container}>
                <Text style={styles.title}> {this.props.title} </Text>
                <TextInput style={styles.input}
                           ref='textInput'
                           value={this.state.currValue}
                           editable={true}
                           keyboardType='number-pad'
                           multiline={this.state.lineNum != 1}
                           numberOfLines={this.state.lineNum || 1}
                           clearButtonMode='while-editing'
                           onFocus={() => {
                               this.refs.textInput.focus()
                           }}
                           onChangeText={this._onChangeText}/>
                <TouchableOpacity onPress={this._showData}
                                  activeOpacity={0.8}
                                  key={this.props.title}
                                  style={styles.btnContainer}>
                    <Text style={styles.btnText}>转换</Text>
                </TouchableOpacity>
            </View>
        );

    }
}


const styles = StyleSheet.create({
    container: {
        height: 60,
        flexDirection: 'row',
        alignItems: 'center',
        backgroundColor: '#FFFFFF'
    },
    title: {
        flex: 1,
        fontSize: 18,
        margin: 10,
        color: '#478ecc'
    },
    input: {
        flex: 3,
        height: 30,
        borderColor: '#d9d9d9',
        borderWidth: 1,
        alignSelf: 'center',
        backgroundColor: '#e1e1e1',
        marginRight: 10,
    },
    btnContainer: {
        flex: 1,
        height: 30,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#478ecc',
        marginRight: 10,
    },
    btn: {
        margin: 10,
        backgroundColor: '#478ecc',
    },
    btnText: {
        fontSize: 16,
        color: '#FFFFFF'
    }


});